<template>
  <div>
    <!--    检索条件-->
    <el-form :inline="true" :model="skuQueryForm" ref="searchRef">
      <el-form-item label="分类" prop="categoryId">
        <el-cascader v-model="skuQueryForm.categoryId" :options="allCategoryList" @visible-change="getCategoryList"
                     :props="cascaderProps" disabled/>
      </el-form-item>
      <el-form-item label="检索" prop="keyword">
        <el-input v-model="skuQueryForm.keyword"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="Price">
        <el-input-number v-model="skuQueryForm.minPrice"/>
        -
        <el-input-number v-model="skuQueryForm.maxPrice"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="skuSearch" type="primary" icon="Search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="searchRef.resetFields()">重置</el-button>
      </el-form-item>
    </el-form>
    <!--  sku列表数据-->
    <el-table :data="skuPage.list" style="width: 100%" v-loading="loading">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <p m="t-0 b-2">
              <el-text tag="b">标题</el-text>
              : {{ props.row.skuTitle }}
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="skuId" label="SkuId"/>
      <el-table-column prop="skuName" label="名称" show-overflow-tooltip="true"/>
      <el-table-column label="默认图片">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.defaultPic " fit="fill"/>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" size="small" @click="openModify(scope.row.skuId)">修改</el-button>
          <el-divider direction="vertical"/>
          <el-button type="primary" size="small">预览</el-button>
          <el-divider direction="vertical"/>
          <el-button type="primary" size="small">评论</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页-->
    <div class="pagination">
      <el-pagination
          hide-on-single-page
          v-model:current-page="skuQueryForm.pageNum"
          v-model:page-size="skuQueryForm.pageSize"
          :page-sizes="[3, 5, 8]"
          small
          layout="total, sizes, prev, pager, next, jumper"
          :total="skuPage.total"
      />
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="修改"
        width="600"
    >
      <el-form :model="skuModifyDTO">
        <el-form-item label="名称">
          <el-input v-model="skuModifyDTO.skuName"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="skuModifyDTO.skuTitle"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="skuModifyDTO.price"></el-input>
        </el-form-item>
        <el-form-item label="默认图片">
          <el-input v-model="skuModifyDTO.defaultPic"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="skuModifyDTO.stock"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
              class="border"
              v-model:file-list="fileShowList"
              action="/api/file/upload/serve/re-market"
              list-type="picture-card"
              :on-success="handleUpload"
              :on-remove="handleRemove"
          >
            <el-icon>
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="skuModifyDTO.skuDescription"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitMpdify">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch,} from "vue";
import {reqGetSkuPage, reqGetSkuModifyDto, reqUpdateSku} from '@/api/serve/re-market'
import {useRouter} from 'vue-router'

let searchRef = ref()
const router = useRouter()
const cascaderProps = {
  value: 'categoryId',
  label: 'name',
  children: 'children',
  emitPath: false
}
let loading = ref(true)
let skuQueryForm = reactive({
  categoryId: '',
  state: '',
  keyword: '',
  minPrice: 0,
  maxPrice: 0,
  pageNum: 1,
  pageSize: 5,
})
let skuModifyDTO = ref({})
let fileShowList = ref([])

let allCategoryList = ref([])
let skuPage = reactive({
  total: 0,
  pageNum: 1,
  list: []
})
const dialogVisible = ref(false)

let openModify = async (skuId: number) => {
  let res = await reqGetSkuModifyDto(skuId)
  fileShowList.value = res.data.skuPictureList.map(item => {
    return {url: item, pid: new Date().toString()}
  })
  skuModifyDTO.value = res.data
  dialogVisible.value = true
}
let handleUpload = (res) => {
  fileShowList.value.push({url: res.data, pid: new Date().toString()})
  skuModifyDTO.value.skuPictureList.push(res.data)
}
let handleRemove = (file) => {
  let index = fileShowList.value.findIndex(item => item.url === file.url)
  fileShowList.value.splice(index, 1)
  skuModifyDTO.value.skuPictureList.splice(index, 1)
}

async function getSkuListData() {
  let res = await reqGetSkuPage(skuQueryForm)
  Object.assign(skuPage, res.data)
  loading.value = false
}

let submitMpdify = async () => {
  let res = await reqUpdateSku(skuModifyDTO.value)
  dialogVisible.value = false
  getSkuListData()
}

function skuSearch() {
  getSkuListData()
}

onMounted(() => {
  skuSearch()
})
watch([() => skuQueryForm.pageNum, () => skuQueryForm.pageSize], () => {
  skuSearch()
})
</script>

<style scoped>

</style>
